<template>
  <div class="page-container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div 
        v-for="(item, index) in menuItems" 
        :key="index"
        class="nav-item"
        :class="{ active: currentMenu === item.key }"
        @click="handleMenuClick(item.key)"
      >
        <span class="nav-icon">{{ item.icon }}</span>
        <span>{{ item.label }}</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-header">
        <div class="tab-group">
          <div 
            class="tab" 
            :class="{ active: activeTab === 'recommended' }"
            @click="activeTab = 'recommended'"
          >推荐</div>
          <div 
            class="tab" 
            :class="{ active: activeTab === 'latest' }"
            @click="activeTab = 'latest'"
          >最新</div>
        </div>
      </div>

      <!-- 文章列表 -->
      <template v-if="currentArticles.length > 0">
        <div class="article-list">
          <div v-for="(article, index) in currentArticles" :key="index" class="article-item">
            <div class="article-main">
              <h2 class="article-title">{{ article.title }}</h2>
              <div class="article-desc">{{ article.desc }}</div>
              <div class="article-meta">
                <div class="meta-left">
                  <span class="author">{{ article.author }}</span>
                  <span class="views"><i class="icon-eye"></i>{{ article.views }}</span>
                  <span class="likes"><i class="icon-like"></i>{{ article.likes }}</span>
                </div>
                <div class="meta-tags">
                  <span v-for="(tag, tagIndex) in article.tags" :key="tagIndex" class="tag">{{ tag }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      
      <!-- 空状态展示 -->
      <template v-else-if="activeTab === 'latest'">
        <div class="charts-container">
          <div class="chart-layout">
            <div class="chart-item">
              <PieChart />
            </div>
            <div class="chart-item">
              <LineChart />
            </div>
          </div>
        </div>
      </template>

      <!-- 3D饼图展示 -->
      <template v-else-if="shouldShow3DPie">
        <div class="charts-container">
          <div class="chart-layout">
            <div class="chart-item full-width">
              <Pie3DChart />
            </div>
          </div>
        </div>
      </template>

      <!-- 暂无数据提示 -->
      <template v-else>
        <div class="empty-state">
          <div class="empty-icon">📭</div>
          <div class="empty-text">暂无数据</div>
          <div class="empty-subtext">该分类下暂时没有相关内容</div>
        </div>
      </template>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-sidebar">
      <div class="welcome-card">
        <div class="welcome-header">
          <h3>晚上好！</h3>
          <span class="welcome-text">点亮在社区的每一天</span>
        </div>
        <button class="sign-in-btn">关注到</button>
      </div>
      
      <div class="ranking-section">
        <div class="ranking-header">
          <span class="ranking-title">📑 文章榜</span>
          <span class="refresh-link">
            <i class="icon-refresh"></i>
            换一换
          </span>
        </div>
        <div class="ranking-list">
          <div class="ranking-item">
            <span class="rank-number">1</span>
            <span class="rank-title">程序员自己设计开发的五子棋...</span>
          </div>
          <div class="ranking-item">
            <span class="rank-number">2</span>
            <span class="rank-title">面试官：如何解决按钮复杂...</span>
          </div>
          <div class="ranking-item">
            <span class="rank-number">3</span>
            <span class="rank-title">用魔法打败魔法——一款职业...</span>
          </div>
          <div class="ranking-item">
            <span class="rank-number">4</span>
            <span class="rank-title">为什么停止在小型项目中使用...</span>
          </div>
          <div class="ranking-item">
            <span class="rank-number">5</span>
            <span class="rank-title">【Fantastic-mobile】⭐ 给...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import PieChart from '../components/PieChart.vue'
import LineChart from '../components/LineChart.vue'
import Pie3DChart from '../components/Pie3DChart.vue'

// 当前激活的标签
const activeTab = ref('recommended')
// 当前选中的菜单
const currentMenu = ref('comprehensive')

// 菜单配置
const menuItems = [
  { key: 'follow', label: '关注', icon: '👁️' },
  { key: 'comprehensive', label: '综合', icon: '📊' },
  { key: 'backend', label: '后端', icon: '💻' },
  { key: 'frontend', label: '前端', icon: '🌐' },
  { key: 'android', label: 'Android', icon: '📱' },
  { key: 'ios', label: 'iOS', icon: '🍎' },
  { key: 'ai', label: '人工智能', icon: '🤖' },
  { key: 'tools', label: '开发工具', icon: '🔧' },
  { key: 'life', label: '代码人生', icon: '📝' },
  { key: 'reading', label: '阅读', icon: '📚' },
  { key: 'ranking', label: '排行榜', icon: '📈' }
]

// 文章数据
const articleData = {
  comprehensive: [
    {
      title: '前端佬们！填房了！用过Element-Plus的进来～',
      desc: '进来看看的前端佬，我真诚地给你聊聊吧！Element-plus的组件，经过验证，如下组件存在内...',
      author: '大诺v',
      views: '39k',
      likes: '319',
      tags: ['前端', 'JavaScript', 'Element']
    },
    {
      title: '有了Trae，人人都是程序员的时代来了',
      desc: '字节推出了一款 AI IDE — Trae，作为一款免费的编程工具，Trae 集成了强大的 AI 模型...',
      author: '德育处主任',
      views: '50k',
      likes: '340',
      tags: ['前端', '后端', '人工智能']
    },
    {
      title: '前端已死是时候入门了——从开源a1项目学习（1）',
      desc: '🚀 快速上手指南 1.克隆项目（就像复制粘贴作业）2.安装依赖（请AI喂咖啡的时间）3.配置环境变量（AI的身份证）...',
      author: 'no_chat',
      views: '1.2k',
      likes: '4',
      tags: ['前端']
    }
  ],
  frontend: [
    {
      title: 'Vue3 + TypeScript 最佳实践指南',
      desc: '本文将介绍在 Vue3 项目中使用 TypeScript 的最佳实践和常见陷阱...',
      author: '前端达人',
      views: '28k',
      likes: '256',
      tags: ['Vue3', 'TypeScript', '前端']
    }
  ]
}

// 处理菜单点击
const handleMenuClick = (menuKey) => {
  currentMenu.value = menuKey
  // 切换菜单时重置为推荐标签
  activeTab.value = 'recommended'
}

// 根据当前菜单和标签计算要显示的文章列表
const currentArticles = computed(() => {
  if (activeTab.value === 'latest') {
    return [] // 最新标签始终返回空数组，以显示图表
  }
  // 如果是关注菜单，返回空数组以显示3D饼图
  if (currentMenu.value === 'follow') {
    return []
  }
  return articleData[currentMenu.value] || []
})

// 是否显示3D饼图
const shouldShow3DPie = computed(() => {
  return currentMenu.value === 'follow' && activeTab.value === 'recommended'
})
</script>

<style scoped>
/* 基础布局 */
.page-container {
  display: flex;
  min-height: 100vh;
  background-color: #f4f5f5;
  position: relative;
  width: 100%;
}

/* 左侧导航栏样式 */
.sidebar {
  width: 240px;
  background-color: white;
  padding: 12px 0;
  position: sticky;
  height: 100vh;
  top: 0;
  border-right: 1px solid #e4e6eb;
  overflow-y: auto;
  flex-shrink: 0;
}

.nav-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #515767;
  font-size: 14px;
  transition: all 0.2s ease;
}

.nav-item:hover {
  background-color: #f4f5f5;
}

.nav-item.active {
  color: #1e80ff;
  background-color: #e8f3ff;
}

.nav-icon {
  margin-right: 12px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
  min-width: 0; /* 防止内容溢出 */
}

.content-header {
  background-color: white;
  padding: 0 20px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tab-group {
  display: flex;
  gap: 32px;
  height: 46px;
  align-items: center;
}

.tab {
  position: relative;
  padding: 8px 0;
  cursor: pointer;
  color: #86909c;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.tab.active {
  color: #1e80ff;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1e80ff;
}

/* 文章列表样式 */
.article-list {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.article-item {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e6eb;
}

.article-item:last-child {
  border-bottom: none;
}

.article-title {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 8px;
  line-height: 1.4;
  cursor: pointer;
}

.article-title:hover {
  color: #1e80ff;
}

.article-desc {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #86909c;
}

.meta-tags {
  display: flex;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  background-color: #f4f5f5;
  border-radius: 3px;
  color: #86909c;
  font-size: 12px;
}

.icon-eye, .icon-like {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -3px;
  opacity: 0.8;
}

.icon-eye::before {
  content: '👁️';
  font-size: 12px;
}

.icon-like::before {
  content: '👍';
  font-size: 12px;
}

/* 右侧边栏样式 */
.right-sidebar {
  width: 240px;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
  background-color: #fff;
}

.welcome-card {
  background-color: white;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.welcome-header {
  margin-bottom: 12px;
}

.welcome-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
}

.welcome-text {
  font-size: 13px;
  color: #86909c;
}

.sign-in-btn {
  width: 100%;
  background-color: #1e80ff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.sign-in-btn:hover {
  background-color: #1b72e8;
}

.ranking-section {
  background-color: white;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ranking-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
}

.refresh-link {
  color: #1e80ff;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-refresh::before {
  content: '🔄';
  font-size: 12px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rank-number {
  color: #1e80ff;
  font-weight: 500;
  font-size: 13px;
  min-width: 16px;
}

.rank-title {
  color: #1d2129;
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式布局优化 */
@media screen and (max-width: 1440px) {
  .page-container {
    padding-right: 0;
  }
  
  .right-sidebar {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .main-content {
    max-width: 100%;
    margin: 0 20px;
  }
  
  .sidebar {
    width: 200px;
  }
}

@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
  
  .main-content {
    margin: 0 10px;
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  color: #1d2129;
  font-size: 16px;
  margin-bottom: 8px;
}

.empty-subtext {
  color: #86909c;
  font-size: 14px;
}

/* 图表布局样式 */
.charts-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.chart-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-item {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-item.full-width {
  grid-column: 1 / -1;
  height: 400px;
}

@media screen and (max-width: 768px) {
  .chart-layout {
    grid-template-columns: 1fr;
  }
}
</style> 